<template>
	<view class="page consultation_doctors_detail">
		<view class="card team">
			<view class="card_title">
				会诊人员
			</view>
			<view class="card_contet">
				<view class="team_list">
					<view class="team_item" v-for="item in detail.doctorInfoRespVOList" :key="item.id">
						<view class="item_avatar">
							<image
								src="https://www.qidujiangtaigong.com/api//admin-api/infra/file/0/get/2b4e1a3e542b87133e8a689fe126555e9d906a511bfdcde36a0192d84c79ea80.jpg"
								mode="aspectFill"></image>
						</view>
						<view class="item_title ellipsis-1">
							{{`${item.name}(${item.titleName})`}}
						</view>
						<view class="item_subtitle price">
							￥{{item.money}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="card patient_item">
			<view class="patient_item_info">
				<view class="item_avatar">
					<image
						:src="detail.avatar||'https://admin.yuanfenjihua.com/admin-api/infra/file/0/get/7d485f174dd88232f08d5d0ea6d05b153a3857402e3ce776d2c1eca015cad0cb.png'"
						mode="scaleToFill"></image>
				</view>
				<view class="item_info">
					<view class="info_name">
						<view class="name">
							{{detail.patientName || ''}}
						</view>
						<view class="tips blue">
							已实名
						</view>
					</view>
					<view class="info_other">
						<view>
							{{detail.patientSex==1?"男":"女" || '男'}}
						</view>
						<view>
							{{detail.patientAge}}岁
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="card case_item">
			<view class="item_info flex">
				<view class="info_title">
					会诊时间：
				</view>
				<view class="info_text">
						{{$dayjs(detail.consultationTime).format('YYYY-MM-DD HH:mm:ss')}}
				</view>
			</view>
			<view class="item_info flex">
				<view class="info_title">
					会诊费用：
				</view>
				<view class="info_text">
					￥{{detail.amount}}
				</view>
			</view>
			<view class="item_info">
				<view class="info_title">
					简要病史
				</view>
				<view class="info_content">
					{{detail.briefMedical}}
				</view>
			</view>
			<view class="item_info">
				<view class="info_title">
					辅助检查结果
				</view>
				<view class="info_content">
					{{detail.auxiliaryResult}}
				</view>
			</view>
			<view class="item_info">
				<view class="info_title">
					初步诊断
				</view>
				<view class="info_content">
					{{detail.primaryDiagnosis}}
				</view>
			</view>
			<view class="item_info">
				<view class="info_title">
					邀请会诊目的
				</view>
				<view class="info_content">
					{{detail.invitationPurpose}}
				</view>
			</view>
			<view class="item_info flex">
				<view class="info_title">
					会诊编号：
				</view>
				<view class="info_text">
					{{detail.consultationId}}
				</view>
			</view>
			<view class="item_info flex">
				<view class="info_title">
					邀请时间：
				</view>
				<view class="info_text">
					{{$dayjs(detail.createTime).format('YYYY-MM-DD HH:mm:ss')}}
				</view>
			</view>
		</view>
		<view class="card case_item" style="margin-bottom: 160rpx;">
			<view class="item_info">
				<view class="info_title">
					会诊结论
				</view>
				<view class="info_content">
					中年女性进食西瓜后急性肠胃炎继而引发急性左心衰后，已初次手术，术后频发复发，是否需要二次手术?
				</view>
			</view>
			<view class="item_info flex">
				<view class="info_title">
					会诊医师：
				</view>
				<view class="info_text">
					胡洋 主治医师
				</view>
			</view>
			<view class="item_info flex">
				<view class="info_title">
					发布时间：
				</view>
				<view class="info_text">
					{{$dayjs(detail.createTime).format('YYYY-MM-DD HH:mm:ss')}}
				</view>
			</view>
		</view>
		<view class="page_bottom">
			<view class="btns">
				查看沟通记录
			</view>
		</view>
	</view>
</template>

<script>
	import {
		queryMyConsultationInfoDetail
	} from '@/api/index.js'
	export default {
		name: '',
		data() {
			return {
				id: 0,
				detail: {}
			}
		},
		onLoad(options) {
			this.id = options.id
			this.queryMyConsultationInfoDetail(this.id)
		},
		methods: {
			queryMyConsultationInfoDetail(id) {
				queryMyConsultationInfoDetail({
					id
				}).then(res => {
					console.log(res)
					this.detail = res.data
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.consultation_doctors_detail {
		.card {
			margin-bottom: 30rpx;
		}

		.page_bottom {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;

			.btns {
				margin: 0 50rpx 30rpx 50rpx;
				padding: 30rpx 0;
			}
		}

		.team {
			.team_list {
				width: 100%;
				overflow-x: auto;
				display: flex;
				align-items: center;

				.team_item {
					flex: 0 0 20%;
					box-sizing: border-box;
					padding: 0 20rpx;
					text-align: center;
					font-size: 24rpx;
					color: #999999;

					.item_avatar {
						margin: 0 auto;
						width: 100rpx;
						height: 100rpx;
						border-radius: 100%;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.item_title {
						margin: 10rpx 0;
						font-size: 28rpx;
						color: #333333;
					}

					.price {
						font-size: 28rpx;
						color: #E11010;
					}
				}
			}
		}

		.patient_item {
			position: relative;
			padding: 40rpx 20px;
			background-color: #FFF;
			border-radius: 20rpx;
			margin-bottom: 30rpx;

			.patient_item_info {
				display: flex;
				align-items: center;

				.item_avatar {
					width: 100rpx;
					height: 100rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.item_info {
					margin-left: 20rpx;
					font-size: 22rpx;
					color: #999999;

					.info_name,
					.info_other {
						display: flex;
						align-items: center;

						&>view {
							margin-right: 10rpx;

							&:last-child {
								margin: 0;
							}
						}
					}

					.info_name {
						margin-bottom: 20rpx;

						.name {
							font-weight: bold;
							font-size: 32rpx;
							color: #333333;
						}

						.tips {
							padding: 6rpx 10rpx;
							border-radius: 10rpx;
							font-size: 22rpx;
							margin-left: 20rpx;

							&.blue {
								color: #3B6CFE;
								background-color: #F3F8FF;
							}
						}
					}
				}
			}
		}

		.case_item {
			margin-bottom: 30rpx;

			&:last-child {
				margin: 0;
			}

			.item_info {
				margin-bottom: 30rpx;

				&:last-child {
					margin: 0;
				}

				&.flex {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}


				.info_title {
					font-size: 28rpx;
					color: #999999;
				}

				.info_text {
					font-size: 28rpx;
					color: #333333;
				}

				.image_group {
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					image {
						flex: 0 0 140rpx;
						width: 120rpx;
						height: 120rpx;
						margin-left: 20rpx;
					}
				}

				.info_content {
					padding: 20rpx;
					background-color: #F8FAFB;
					font-size: 28rpx;
					color: #333333;
				}
			}
		}
	}
</style>